<template>
    <div class="ImageBlock" :style="Style">
      <img v-lazy="imgSrcListen" alt="" class="workGroupImg"
           @error="onerror">
      <div class="leftTop"><slot name="leftTop"></slot></div>
      <div class="rightTop"><slot name="rightTop"></slot></div>
      <div class="rightBottom"><slot name="rightBottom"></slot></div>
      <div class="leftBottom"><slot name="leftBottom"></slot></div>
    </div>
</template>
<script>
export default {
  props:{
    imgSrc:{
      type:String,
      default:''
    },
    width:{
      type:String,
      default: "4rem"
    },
    height:{
      type:String,
      default: "3rem"
    },
    loadingType:{
      default:"loading"
    }
  },
  methods:{
    onerror(e) {
      let _this=this
      e.target.src = _this.defaultImg
    }
  },
  data(){
    return {

    }
  },
  computed:{
    imgSrcListen(){
      let _this= this

      return {
        src:_this.imgSrc?_this.imgSrc:'error',
        loading:"https://topart.cn/Public/images/nopic.jpg"

      }
    },
    Style(){
      let _this = this
      return {
        width:_this.width,
        height:_this.height
      }
    }
  }
}
</script>
<style scoped>
  .ImageBlock{position: relative;overflow: hidden}
  .workGroupImg{width: 100%;height: 100%;border:1px solid #C4C4C4}
  .leftTop{position: absolute;top:0;left:0}
  .rightTop{position: absolute;top:0;right:0}
  .rightBottom{position: absolute;bottom:0;right:0}
  .leftBottom{position: absolute;bottom:0;left:0}
</style>
